<template>
  <v-card class="history-container rounded-lg" :loading="isload" elevation="0">
    <v-row v-if="items.length > 0">
      <v-col cols="12" v-for="(item, index) in items" :key="index">
        <div class="time-header mb-2">
          <v-chip
            class="date-chip"
            size="large"
            color="#1e1f2a"
            text-color="#7C9CBF"
            variant="elevated"
            prepend-icon="mdi-calendar-clock"
          >
            {{ item.time }}
          </v-chip>
          <div class="time-line"></div>
        </div>
        <v-slide-y-transition>
          <VideoList :video-list="item.data" />
        </v-slide-y-transition>
      </v-col>
    </v-row>

    <!-- 空状态 -->
    <v-container v-if="!isload && items.length === 0" class="d-flex flex-column align-center justify-center empty-state">
      <v-icon
        icon="mdi-history"
        size="100"
        color="grey-darken-1"
        class="mb-5 empty-icon"
      ></v-icon>
      <div class="text-h5 text-grey-darken-1 mb-2">暂无观看历史</div>
      <div class="text-body-1 text-grey text-center mb-6">
        您还没有观看过视频<br>浏览视频后将会在这里显示您的观看历史
      </div>
      <v-btn
        to="/"
        color="#7C9CBF"
        variant="flat"
        prepend-icon="mdi-video-outline"
        class="explore-btn"
        rounded
      >
        去发现视频
      </v-btn>
    </v-container>
    
    <!-- 加载状态 -->
    <v-container v-if="isload" class="d-flex flex-column align-center justify-center loading-state py-15">
      <v-progress-circular
        indeterminate
        color="#7C9CBF"
        size="64"
        class="mb-4"
      ></v-progress-circular>
      <div class="text-body-1 text-grey">正在加载历史记录...</div>
    </v-container>
  </v-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { apiGetHistoryVideo } from '../../../apis/video';
import VideoList from '../../../components/video/list.vue';

const items = ref([])
const isload = ref(true)

const getHistoryVideos = () => {
  isload.value = true
  items.value = []
  apiGetHistoryVideo().then(({ data }) => {
    isload.value = false
    if (data.state && data.data) {
      for (let key in data.data) {
        items.value.push({
          time: key,
          data: data.data[key]
        })
      }
      // 按时间排序（最新的在前面）
      items.value.sort((a, b) => new Date(b.time) - new Date(a.time))
    }
  }).catch(error => {
    console.error('获取历史记录失败:', error)
    isload.value = false
  })
}

onMounted(getHistoryVideos)
</script>

<style scoped>
.history-container {
  background-color: transparent;
  min-height: 400px;
  position: relative;
}

.time-header {
  display: flex;
  align-items: center;
  margin-top: 16px;
  position: relative;
}

.date-chip {
  font-weight: 500;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: 2;
}

.date-chip:hover {
  transform: scale(1.05);
}

.time-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(124, 156, 191, 0.8), rgba(124, 156, 191, 0.1));
  margin-left: 12px;
}

.empty-state, .loading-state {
  min-height: 400px;
}

.empty-icon {
  opacity: 0.6;
  animation: pulse 3s infinite ease-in-out;
}

.explore-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.explore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.6;
  }
}

/* 响应式设计调整 */
@media (max-width: 600px) {
  .date-chip {
    font-size: 0.9rem;
  }
  
  .empty-icon {
    font-size: 80px;
  }
}
</style>